<script setup lang="ts">
import { onMounted } from 'vue'
// import { useMotion } from '@vueuse/motion' // 未使用，保留注释以提示可选动画能力
import Navigation from '@/components/Navigation.vue'
import ParticleBackground from '@/components/ParticleBackground.vue'

import {
  Code,
  Smartphone,
  Palette,
  ArrowRight,
  Star,
  Users,
  Coffee,
  Zap,
  Cpu,
  Wifi
} from 'lucide-vue-next'
import AOS from 'aos'
import 'aos/dist/aos.css'

// 核心服务数据
const services = [
  {
    icon: Code,
    title: '网站开发',
    description: '现代化响应式网站开发，提供优质的用户体验和性能优化',
    features: ['Vue.js/React', '响应式设计', 'SEO优化']
  },
  {
    icon: Smartphone,
    title: '移动应用',
    description: '跨平台移动应用开发，原生性能与开发效率的完美结合',
    features: ['React Native', 'Flutter', '原生开发']
  },
  {
    icon: Palette,
    title: 'UI/UX设计',
    description: '用户体验至上的界面设计，让产品更具吸引力和易用性',
    features: ['界面设计', '交互设计', '品牌设计']
  }
]

// 统计数据
const stats = [
  { number: 50, label: '完成项目', suffix: '+' },
  { number: 30, label: '满意客户', suffix: '+' },
  { number: 3, label: '团队成员', suffix: '' },
  { number: 2, label: '服务年限', suffix: '年' }
]

/**
 * 平滑滚动到指定元素
 */
const scrollToSection = (sectionId: string) => {
  const element = document.getElementById(sectionId)
  if (element) {
    element.scrollIntoView({ behavior: 'smooth' })
  }
}

onMounted(() => {
  // 初始化AOS动画库
  AOS.init({
    duration: 800,
    easing: 'ease-out-cubic',
    once: true,
    offset: 100
  })
})
</script>

<template>
  <!-- bg-white dark:bg-black text-gray-900 -->
  <div
    class="min-h-screen relative bg-white dark:bg-black text-gray-900 dark:text-white transition-colors duration-300"
  >
    <!-- 导航栏 -->
    <Navigation />

    <!-- Hero区域 - 品牌展示 -->
    <section class="relative min-h-screen flex items-center justify-center overflow-hidden tech-bg">
      <!-- 粒子背景 -->
      <ParticleBackground />

      <!-- 背景渐变 -->
      <div
        class="absolute inset-0 bg-gradient-to-br from-gray-50 via-white to-gray-100 dark:from-black dark:via-gray-900 dark:to-black"
      />

      <!-- 网格背景 -->
      <div class="absolute inset-0 grid-bg opacity-30 dark:opacity-20" />

      <!-- 浮动动画元素 -->
      <div class="absolute inset-0 overflow-hidden">
        <div
          class="absolute top-1/4 left-1/4 w-64 h-64 bg-primary-400/20 dark:bg-cyber-green/10 rounded-full blur-3xl animate-pulse"
        />
        <div
          class="absolute bottom-1/4 right-1/4 w-96 h-96 bg-accent-400/10 dark:bg-cyber-blue/5 rounded-full blur-3xl animate-pulse delay-1000"
        />
        <div
          class="absolute top-1/2 right-1/3 w-32 h-32 bg-cyber-purple/20 dark:bg-cyber-purple/10 rounded-full blur-2xl animate-float"
        />
      </div>

      <!-- 主要内容 -->
      <div class="relative z-10 text-center px-4 sm:px-6 lg:px-8 max-w-5xl mx-auto">
        <div data-aos="fade-up">
          <h1 class="text-5xl sm:text-6xl lg:text-7xl font-bold mb-6">
            <span class="gradient-text"> 火叶工作室 </span>
          </h1>
          <p
            class="text-xl sm:text-2xl lg:text-3xl text-primary-500 dark:text-cyber-green font-medium mb-8 animate-pulse-slow"
          >
            点燃创意，照亮未来
          </p>
        </div>

        <div
          data-aos="fade-up"
          data-aos-delay="200"
        >
          <p
            class="text-lg sm:text-xl text-gray-600 dark:text-gray-300 mb-12 max-w-3xl mx-auto leading-relaxed"
          >
            我们是一支充满激情的技术团队，专注于为客户提供高质量的数字化解决方案。
            从网站开发到移动应用，从UI设计到用户体验，我们用技术点燃每一个创意火花。
          </p>
        </div>

        <div
          data-aos="fade-up"
          data-aos-delay="400"
          class="flex flex-col sm:flex-row gap-4 justify-center"
        >
          <button
            class="group bg-primary-500 hover:bg-primary-600 dark:bg-cyber-green dark:hover:bg-cyber-green/80 text-white dark:text-black px-8 py-4 rounded-lg font-semibold transition-all duration-300 transform hover:scale-105 flex items-center justify-center gap-2 glow-effect"
            @click="scrollToSection('services')"
          >
            探索服务
            <ArrowRight class="w-5 h-5 group-hover:translate-x-1 transition-transform" />
          </button>
          <button
            class="border-2 border-primary-500 dark:border-cyber-green text-primary-500 dark:text-cyber-green hover:bg-primary-500 dark:hover:bg-cyber-green hover:text-white dark:hover:text-black px-8 py-4 rounded-lg font-semibold transition-all duration-300 transform hover:scale-105"
            @click="scrollToSection('about')"
          >
            了解我们
          </button>
        </div>
      </div>

      <!-- 滚动提示 -->
      <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
        <div
          class="w-6 h-10 border-2 border-gray-400 dark:border-gray-600 rounded-full flex justify-center"
        >
          <div class="w-1 h-3 bg-primary-500 dark:bg-cyber-green rounded-full mt-2 animate-pulse" />
        </div>
      </div>

      <!-- 科技感装饰元素 -->
      <div class="absolute top-20 left-10 opacity-20 dark:opacity-30">
        <Zap class="w-8 h-8 text-cyber-blue animate-pulse" />
      </div>
      <div class="absolute bottom-32 right-16 opacity-20 dark:opacity-30">
        <Cpu class="w-6 h-6 text-cyber-purple animate-float" />
      </div>
      <div class="absolute top-1/3 right-20 opacity-20 dark:opacity-30">
        <Wifi class="w-10 h-10 text-cyber-pink animate-pulse delay-500" />
      </div>
    </section>

    <!-- 工作室介绍 -->
    <section
      id="about"
      class="py-20 bg-gray-50 dark:bg-gray-900/50 relative overflow-hidden"
    >
      <!-- 背景装饰 -->
      <div class="absolute inset-0 bg-cyber-grid opacity-10" />
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid lg:grid-cols-2 gap-12 items-center">
          <div data-aos="fade-right">
            <h2 class="text-4xl lg:text-5xl font-bold mb-6">
              关于
              <span class="text-primary-500 dark:text-cyber-green">火叶工作室</span>
            </h2>
            <p class="text-lg text-gray-600 dark:text-gray-300 mb-8 leading-relaxed">
              火叶工作室成立于2022年，是一家专注于数字化产品开发的创新型技术团队。
              我们相信技术的力量能够改变世界，每一行代码都承载着我们对完美的追求。
            </p>
            <p class="text-lg text-gray-600 dark:text-gray-300 mb-8 leading-relaxed">
              我们的团队由经验丰富的开发者、设计师和产品经理组成，
              致力于为客户提供从概念到实现的全方位数字化解决方案。
            </p>

            <!-- 统计数据 -->
            <div class="grid grid-cols-2 gap-6">
              <div
                v-for="stat in stats"
                :key="stat.label"
                class="text-center p-4 bg-white/80 dark:bg-black/30 rounded-lg backdrop-blur-sm border border-gray-200 dark:border-gray-700"
                data-aos="fade-up"
                data-aos-delay="100"
              >
                <div class="text-3xl font-bold text-primary-500 dark:text-cyber-green mb-2">
                  {{ stat.number }}{{ stat.suffix }}
                </div>
                <div class="text-gray-500 dark:text-gray-400 text-sm">
                  {{ stat.label }}
                </div>
              </div>
            </div>
          </div>

          <div
            data-aos="fade-left"
            class="relative"
          >
            <div
              class="relative z-10 bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-900 p-8 rounded-2xl border border-gray-200 dark:border-gray-700 shadow-xl"
            >
              <div class="flex items-center mb-6">
                <Star class="w-6 h-6 text-primary-500 dark:text-cyber-green mr-3" />
                <h3 class="text-xl font-semibold text-gray-900 dark:text-white">我们的使命</h3>
              </div>
              <p class="text-gray-600 dark:text-gray-300 mb-6">
                用技术点燃创意，用创新照亮未来。我们致力于为每一位客户提供超越期望的数字化体验。
              </p>

              <div class="flex items-center mb-4">
                <Users class="w-5 h-5 text-primary-500 dark:text-cyber-green mr-3" />
                <span class="text-gray-600 dark:text-gray-300">专业团队协作</span>
              </div>
              <div class="flex items-center">
                <Coffee class="w-5 h-5 text-primary-500 dark:text-cyber-green mr-3" />
                <span class="text-gray-600 dark:text-gray-300">7x24小时技术支持</span>
              </div>
            </div>

            <!-- 装饰性背景 -->
            <div
              class="absolute -top-4 -right-4 w-full h-full bg-primary-400/20 dark:bg-cyber-green/10 rounded-2xl -z-10"
            />
          </div>
        </div>
      </div>
    </section>

    <!-- 核心服务展示 -->
    <section
      id="services"
      class="py-20 relative overflow-hidden"
    >
      <!-- 背景装饰 -->
      <div
        class="absolute inset-0 bg-gradient-to-b from-transparent via-primary-50/30 to-transparent dark:via-gray-900/30"
      />
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div
          class="text-center mb-16"
          data-aos="fade-up"
        >
          <h2 class="text-4xl lg:text-5xl font-bold mb-6 text-gray-900 dark:text-white">
            我们的
            <span class="text-primary-500 dark:text-cyber-green">核心服务</span>
          </h2>
          <p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
            从创意构思到产品落地，我们提供全方位的数字化解决方案
          </p>
        </div>

        <div class="grid md:grid-cols-3 gap-8">
          <div
            v-for="(service, index) in services"
            :key="service.title"
            class="group bg-white/80 dark:bg-gray-900/50 p-8 rounded-2xl border border-gray-200 dark:border-gray-800 hover:border-primary-400/50 dark:hover:border-cyber-green/50 transition-all duration-300 hover:transform hover:scale-105 backdrop-blur-sm shadow-lg hover:shadow-xl"
            data-aos="fade-up"
            :data-aos-delay="index * 100"
          >
            <div class="mb-6">
              <div
                class="w-16 h-16 bg-primary-100 dark:bg-cyber-green/10 rounded-2xl flex items-center justify-center mb-4 group-hover:bg-primary-200 dark:group-hover:bg-cyber-green/20 transition-colors glow-effect"
              >
                <component
                  :is="service.icon"
                  class="w-8 h-8 text-primary-500 dark:text-cyber-green"
                />
              </div>
              <h3
                class="text-2xl font-bold mb-4 text-gray-900 dark:text-white group-hover:text-primary-500 dark:group-hover:text-cyber-green transition-colors"
              >
                {{ service.title }}
              </h3>
              <p class="text-gray-600 dark:text-gray-300 mb-6 leading-relaxed">
                {{ service.description }}
              </p>
            </div>

            <div class="space-y-2">
              <div
                v-for="feature in service.features"
                :key="feature"
                class="flex items-center text-sm text-gray-500 dark:text-gray-400"
              >
                <div
                  class="w-2 h-2 bg-primary-500 dark:bg-cyber-green rounded-full mr-3 animate-pulse"
                />
                {{ feature }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- CTA区域 -->
    <section
      class="py-20 bg-gradient-to-r from-primary-100/50 to-accent-100/50 dark:from-cyber-green/10 dark:to-cyber-blue/10 relative overflow-hidden"
    >
      <!-- 背景装饰 -->
      <div class="absolute inset-0 bg-cyber-grid opacity-5" />
      <div
        class="absolute top-10 left-10 w-20 h-20 bg-cyber-purple/20 rounded-full blur-xl animate-float"
      />
      <div
        class="absolute bottom-10 right-10 w-16 h-16 bg-cyber-pink/20 rounded-full blur-lg animate-pulse"
      />

      <div
        class="max-w-4xl mx-auto text-center px-4 sm:px-6 lg:px-8 relative z-10"
        data-aos="fade-up"
      >
        <h2 class="text-4xl lg:text-5xl font-bold mb-6 text-gray-900 dark:text-white">
          准备开始您的项目了吗？
        </h2>
        <p class="text-xl text-gray-600 dark:text-gray-300 mb-8">让我们一起将您的创意变为现实</p>
        <router-link
          to="/contact"
          class="inline-flex items-center gap-2 bg-primary-500 hover:bg-primary-600 dark:bg-cyber-green dark:hover:bg-cyber-green/80 text-white dark:text-black px-8 py-4 rounded-lg font-semibold transition-all duration-300 transform hover:scale-105 glow-effect shadow-lg"
        >
          联系我们
          <ArrowRight class="w-5 h-5" />
        </router-link>
      </div>
    </section>
  </div>
</template>
